import { computed, createVNode, defineComponent, h } from 'vue';
import avatarImg from '@/assets/images/avatar.png';
// import screenImg from '@/assets/images/screen/nav-screen.png';
import {
  useCommonStore,
  usePermissionsStore,
  useTabViewsStore,
  useThemeStore,
  useUserStore,
} from '@/stores/modules';
import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
import {
  Avatar,
  Breadcrumb,
  ConfigProvider,
  Dropdown,
  Flex,
  Layout,
  Menu,
  MenuItem,
  Modal,
} from 'ant-design-vue';
// import type { ItemType } from 'ant-design-vue';
// import { storeToRefs } from 'pinia';
import { RouterLink } from 'vue-router';

// import SvgIcon from '@/components/SvgIcons/Index.vue';

export default defineComponent({
  name: 'layout-header',
  setup() {
    // const permissionSore = usePermissionsStore();
    const { logout } = useUserStore();
    // const { setCurrentNav } = permissionSore;
    // const { menus, currentNav } = storeToRefs(permissionSore);
    const themeStore = useThemeStore();
    const tabViewsStore = useTabViewsStore();
    // const commonStore = useCommonStore();
    // const route = useRoute();
    // const router = useRouter();

    // const breadcrumbRoutes = computed(() => {
    //   const matchedRoutes = route.matched.filter(
    //     (item) => item.meta && item.meta.title,
    //   );
    //   let breadcrumb = matchedRoutes.map((item: any) => ({
    //     path: item.path,
    //     breadcrumbName: item.meta.title,
    //   }));
    //   if (breadcrumb[0].breadcrumbName != '首页') {
    //     breadcrumb = [{ path: '/dashboard', breadcrumbName: '首页' }].concat(
    //       breadcrumb,
    //     );
    //   }
    //   return breadcrumb;
    // });
    // const items = computed(() => {
    //   return menus.value.reduce<ItemType[]>((prev, item) => {
    //     if (item.meta?.hide) {
    //       return prev;
    //     }
    //     const data: ItemType = {
    //       key: item.path as string,
    //       label: h(
    //         RouterLink,
    //         { to: item.path },
    //         {
    //           default: () => {
    //             return (
    //               <div class='h-full flex items-center justify-between font-bold'>
    //                 {item.meta?.icon && (
    //                   <SvgIcon
    //                     name={item.meta.icon}
    //                     class='w-5 h-5 mr-1'
    //                     color='undefined'
    //                     strokeColor='undefined'
    //                   />
    //                 )}
    //                 {item.meta?.title}
    //               </div>
    //             );
    //           },
    //         },
    //       ),
    //       title: item.meta!.title as string,
    //     };
    //     prev.push(data);
    //     return prev;
    //   }, []);
    // });
    // const onOpenScreen = () => {
    //   const { href } = router.resolve('/screen');
    //   window.open(href, '_blank');
    // };
    const onLogout = async () => {
      Modal.confirm({
        title: '系统提醒',
        icon: createVNode(ExclamationCircleOutlined),
        content: '确认退出登录吗?',
        centered: true,
        okText: '确认',
        okType: 'danger',
        cancelText: '取消',
        onOk() {
          logout();
        },
      });
    };
    return () => (
      <ConfigProvider
        theme={{
          ...themeStore.topHeaderTheme,
        }}
      >
        <Layout.Header
          class={`!px-[18px] menu-header ${tabViewsStore.hideTab ? 'hide-before' : ''}`}
        >
          <Flex align='center'>
            <div class='flex-1 overflow-hidden'>
              {/* <Breadcrumb
                routes={breadcrumbRoutes.value}
                itemRender={({ route, paths }) => {
                  return paths.length == 1 ? (
                    <router-link to={`/${paths[0]}`}>
                      {route.breadcrumbName}
                    </router-link>
                  ) : (
                    route.breadcrumbName
                  );
                }}
              ></Breadcrumb> */}
            </div>
            <Dropdown class='w-8'>
              {{
                default: () => (
                  <Avatar class='w-8 h-8' src={avatarImg}>
                    {' '}
                  </Avatar>
                ),
                overlay: () => (
                  <Menu>
                    <MenuItem key='personal'>
                      <RouterLink to='/personal'>个人中心</RouterLink>
                    </MenuItem>
                    <MenuItem key='logout' onClick={() => onLogout()}>
                      退出登录
                    </MenuItem>
                  </Menu>
                ),
              }}
            </Dropdown>
          </Flex>
        </Layout.Header>
      </ConfigProvider>
    );
  },
});
